<!-- 优惠信息 -->
<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j components-coupon-list">
    <div class="coupon-tab">
      <div
        :class="['tab-item', showCanUse?'active':'']"
        @click="showCanUse=true"
      >
        {{ $t('coupons.availableCoupons') }}
      </div>
      <div
        :class="['tab-item', showCanUse?'':'active']"
        @click="showCanUse=false"
      >
        {{ $t('coupons.noCouponsAvailable') }}
      </div>
    </div>
    <div
      v-if="showCanUse"
      class="coupon-box"
    >
      <div
        v-for="(cItem, index) in coupons.canUseCoupons"
        :key="index"
        class="c-item"
        :class="{'check':cItem.choose}"
        @click="checkCoupon(cItem.couponUserId,index)"
      >
        <div class="coupon-type">
          <div class="coupon-price">
            <div
              v-if="cItem.couponType===1 || cItem.couponType===3"
              class="price"
            >
              ￥
              <span class="big">{{ cItem.reduceAmount }}</span>
            </div>
            <div
              v-if="cItem.couponType===2"
              class="price"
            >
              <span class="big">{{ cItem.couponDiscount }}</span>
              {{ $t('fold') }}
            </div>
            <span class="limit">{{ $t('coupons.availableOver').replace('x',cItem.cashCondition) }}</span>
          </div>
          <div class="coupon-time">
            {{ $t('coupons.validUntil') }}：{{ cItem.endTime }}
          </div>
        </div>
        <div class="coupon-info">
          <div class="range">
            <div class="range-item">
              <span class="label">{{ $t('only') }}：</span>
              <span class="text">{{ cItem.suitableProdType===0?$t('coupons.universal'):$t('coupons.specifiedProductsAvailable') }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="!showCanUse"
      class="coupon-box"
    >
      <div
        v-for="(cItem,index) in coupons.unCanUseCoupons"
        :key="index"
        class="c-item useless"
      >
        <div class="coupon-type">
          <div class="coupon-price">
            <div
              v-if="cItem.couponType===1 || cItem.couponType===3"
              class="price"
            >
              ￥
              <span class="big">{{ cItem.reduceAmount }}</span>
            </div>
            <div
              v-if="cItem.couponType===2"
              class="price"
            >
              <span class="big">{{ cItem.couponDiscount }}{{ $t('fold') }}</span>
            </div>
            <span class="limit">{{ $t('coupons.availableOver').replace('x',cItem.cashCondition) }}</span>
          </div>
          <div class="coupon-time">
            {{ $t('coupons.validUntil') }}：{{ cItem.endTime }}
          </div>
        </div>
        <div class="coupon-info">
          <div class="range">
            <div class="range-item">
              <span class="label">{{ $t('only') }}：</span>
              <span class="text">{{ cItem.suitableProdType===0?$t('coupons.universal'):$t('coupons.specifiedProductsAvailable') }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="showCanUse && !coupons.canUseCoupons.length"
      class="coupon-box"
    >
      <div class="coupon-empty">
        {{ $t('coupons.thereAreNoCouponsSoGoGetThem') }}
      </div>
    </div>
    <div
      v-if="!showCanUse && !coupons.unCanUseCoupons.length"
      class="coupon-box"
    >
      <div class="coupon-empty">
        {{ $t('coupons.noRelatedCoupons') }}
      </div>
    </div>
  </div>

  <!-- /优惠信息 -->
</template>
<script setup>
const emit = defineEmits(['checkCoupon'])
const props = defineProps({
  coupons: {
    default: () => { },
    type: Object
  },
  isShowUncan: {
    type: Boolean,
    default: false
  }
})

const showCanUse = ref(true)

onMounted(() => {
  showCanUse.value = !props.isShowUncan
})

const checkCoupon = (couponUserId) => {
  props.coupons.canUseCoupons.forEach(coupon => {
    if (coupon.couponUserId === couponUserId) {
      coupon.choose = !coupon.choose
    } else {
      coupon.choose = false
    }
  })
  emit('checkCoupon')
}

</script>
<style lang="scss" scoped>
@use './index.scss';
</style>
